<template>
  <view class="apply">
    <view class="apply_list">
      <uni-list border-full>
        <uni-list-item title="账单号：" :rightText="listData.applyId" />
        <uni-list-item title="户号：" :rightText="listData.accountNumber" />
        <uni-list-item title="宽带金额：" :rightText="`${rental}/月`" />
        <!-- <uni-list-item title="付款周期：" :rightText="listData.payWay + '月'" /> -->
        <!-- <uni-list-item title="支付时间：" :rightText="listData.payTime" /> -->
        <uni-list-item title="账单时间：" :rightText="listData.createTime" />
        <uni-list-item title="账单状态：" :rightText="listData.userPayStatus ==0?'未支付':'已支付'" />
        <!-- <uni-list-item title="结束时间：" :rightText="listData.updateTime" /> -->
        <uni-list-item
          title="账单金额："
          :rightText="`${listData.meetMoney}元`"
        />
      </uni-list>
    </view>
    <view class="rent_box">
      <h1 class="rent_title">租金说明</h1>
      <text>
        {{ rent }}
      </text>
    </view>
    <view class="room-btn apartment">
      <button class="btn" @tap="payBroadbandOrder">立即支付</button>
    </view>
  </view>
</template>

<script setup>
import { customNav } from "@/utils/customNav";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { getDictConfigListByType } from "@/package_kuafu_apartment/pages/api/home.js";
import { payBroadbandOrderApi } from "@/package_kuafu_apartment/pages/api/my.js";

const listData = ref({});

const rent = ref("");
const rental = ref(0);
async function getBroadbandMonthlyRent() {
  const res = await getDictConfigListByType("1830864481711304706");
  console.log("宽带月租", res);
  const { code, data } = res || {};
  if (code == 200) {
    rental.value = Number(data[0]?.children[0].filedName);
  }
}
// 租金说明
async function getRentDescription() {
  const res = await getDictConfigListByType("1831580252582195202");
  const { code, data } = res || {};
  if (code == 200) {
    rent.value = data[0]?.children[0].filedName;
  }
}
async function payBroadbandOrder() {
  let option = {
    orderId: listData.value.id,
    // #ifdef MP-WEIXIN
    payType: "0",
    // #endif
    // #ifdef H5 || APP-PLUS
    payType: "1",
    // #endif
  };
  const res = await payBroadbandOrderApi(option);
  const { code, data } = res || {};
  if (code == 200) {
    // console.log("data",data);
    weixinClick(data);
  }
}
const weixinClick = (payData) => {
  uni.requestPayment({
    provider: "wxpay",
    timeStamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.prepayId,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function (res) {
      if (res.errMsg == "requestPayment:ok") {
        customNav(`index`);
      }
    },
    fail: function (err) {
      if (err.errMsg == "requestPayment:fail cancel")
        return uni.showToast({
          title: "您已取消支付",
          duration: 2000,
          icon: "none",
        });
      uni.showToast({ title: "支付失败", duration: 2000, icon: "none" });
    },
  });
};
onLoad((option) => {
  getRentDescription();
  getBroadbandMonthlyRent();
  let options = JSON.parse(option.information);
  console.log("options", options);
  listData.value = options;
});
</script>

<style lang="less" scoped>
.apply_list {
  background: @color-origin-white;
  padding: 30rpx;
  margin-bottom: 50rpx;
}
.rent_box {
  background: @color-origin-white;
  padding: 30rpx;
  font-weight: 400;
  font-size: 23rpx;
  color: @color-grey;
  line-height: 35rpx;
  .rent_title {
    font-weight: 500;
    font-size: 31rpx;
    color: #272636;
  }
}
</style>